<template>
  <div class="sider-container">
    <div
      v-for="(temp ,index) in listType"
      :key="index"
      class="sider-item"
      :class="listNowCheck === temp.type ? 'active' : '' "
      @click="handlerClick(temp.type)"
    >{{ temp.type }}</div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'ItemSiderBar',
  computed: {
    ...mapGetters(['listType', 'listNowCheck'])
  },
  methods: {
    handlerClick(param) {
      this.$store.dispatch('app/getListNowUse', param)
    }
  }
}
</script>

<style lang="scss" scoped>
.sider-container {
  width: 25%;
  height: 100%;
  text-align: center;
  overflow-x: hidden;
  overflow-y: scroll;
  font-size: 14px;
  font-weight: bold;
  border-right: 1px solid #344b64;
  color: #9d9ea3;
  .sider-item {
    margin: 15px 10px;
    padding: 5px 0;
    box-sizing: initial;
  box-sizing: border-box;
    border-bottom: 3px solid;
    border-color: transparent;
  }
  .active {
    border-color: #fff;
    color: #fff;
  }
}
</style>

